<template>
  <view v-if="show" class="pages">
    <view class="content">
      <view class="title">请选择 <span class="close" @click="show=false">×</span></view>
    <view class="head">
      <view >{{ pckrData[0].lablel }}</view>
      <view >{{ pckrData[1].lablel }}</view>
      <view >{{ pckrData[2].lablel }}</view>
    </view>
    <scroll-view  scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'520px'}]" :scroll-with-animation="true" :enable-back-to-top="true">
      <block v-for="(item,index) in itemArr" :key="index">
        <view :class="'indexItem-' + index" :id="'indexes-' + index" :data-index="index">
          <view class="indexItem">{{ indexList[index] }}</view>
          <view class="cu-list" v-for="(cell, index) in item" @click="checkeData(cell)">
            <view class="cu-item"  >
                  <text class="">{{ cell .text }}</text>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <view class="indexBar" :style="[{height:'510px'}]">
      <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
        <view class="indexBar-item" v-for="(item,index) in indexList" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{ item }}</view>
      </view>
    </view>
    <!--选择显示-->
    <view v-show="!hidden" class="indexToast">
      {{ listCur }}
    </view>
    </view>
  </view>
</template>

<script>
import provinceData from './city-china.json';
import {pinyin} from "./pinyin";
export default {
  data() {
    return {
      level: 0,//层级
      pckrData: [
        {value: 0, lablel: '请选择省'},
        {value: 1, lablel: '请选择市'},
        {value: 2, lablel: '请选择区'},
      ],
      show: false,
      indexList: [],
      itemArr: [],
      provinceData: provinceData,//本地省市区数据
      hidden: true,
      listCurID: '',
      listCur: '',
      picker :[ ]//暂存每层数据用于重选
    };
  },
  mounted() {
    // this.getDataList()
  },
  onReady() {
  },
  methods: {
    //重选
    reelect(index){
      this.level=0
      this.indexList = []
      this.itemArr = []
      this.picker=[]
      this.getDataList()
    },

    checkeData(e){
      this.indexList = []
      this.itemArr = []
      if (this.level === 0) {
        this.picker[0] = e
      }
      if (this.level === 1) {
        this.picker[1] = e
      }
      if (this.level >= 2) {
        this.level = 2
        this.picker[2] = e
      }
      this.pckrData[this.level].lablel = e.text
      this.pySegSort(e.children)
      this.level++
      console.log(this.level)
      if (this.level === 3) {
        this.pySegSort(this.picker[1].children)
        this.show=false
        this.$emit('change', this.pckrData);
      }
    },

    chineseToInitials(word) {
      let SX = '';
      for (var i = 0; i < 1; i++) {
        var c = word.charAt(i);
        if (/^[A-Z]+$/.test(c)) {
          SX += c;
        }
      }
      return SX
    },
    chineseToPinYin(l1) {
      var l2 = l1.length;
      var I1 = '';
      var reg = new RegExp('[a-zA-Z0-9]');
      for (var i = 0; i < l2; i++) {
        var val = l1.substr(i, 1);
        var name = this.arraySearch(val, pinyin);
        if (reg.test(val)) {
          I1 += val;
        } else if (name !== false) {
          I1 += name;
        }
      }
      I1 = I1.replace(/ /g, '-');
      while (I1.indexOf('--') > 0) {
        I1 = I1.replace('--', '-');
      }
      return I1;
    },
    arraySearch(l1, l2) {
      for (var name in pinyin) {
        if (pinyin[name].indexOf(l1) !== -1) {
          return this.ucfirst(name);
        }
      }
      return false;
    },
    ucfirst(l1) {
      if (l1.length > 0) {
        var first = l1.substr(0, 1).toUpperCase();
        var spare = l1.substr(1, l1.length);
        return first + spare;
      }
    },
    //列表数据源
    getDataList(id) {
      this.indexList = []
      this.itemArr = []
      this.pySegSort(this.provinceData)
    },
    pySegSort(arr) {
      if (!arr) return
      if (arr.length == 0) return;
      if (!String.prototype.localeCompare) return null;
      var letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
      var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split("");
      var segs = []; // 存放数据
      var res = {};
      let curr;
      var re = /[^\u4e00-\u9fa5]/; //中文正则
      var pattern = new RegExp(
          "[`\\-~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？12345678990]"); //特殊符号

      letters.filter((items, i) => {
        curr = {
          initial: '', //字母
          data: [], //数据
        };
        arr.map((v, index) => {
          // 特殊字符
          if (pattern.test(v.text[0])) {
            if ((!zh[i - 1] || zh[i - 1].localeCompare(v.text) <= 0) && v.text
                .localeCompare(zh[i]) == -1) {
              curr.data.push(v);
            }
          }
          // 判断首个字是否是中文
          // if (uni.$u.test.chinese(v.text[0])) {
            // 英文
            if (this.chineseToInitials(this.chineseToPinYin(v.text)) === items) {
              curr.data.push(v);
            }
          // }
        })
        if (curr.data.length) {
          curr.initial = letters[i]
          segs.push(curr);
          curr.data.sort((a, b) => {
            return a.text.localeCompare(b.text);
          });
        }
      })
      res.segs = Array.from(new Set(segs)) //去重
      res.segs.forEach((item, index) => {
        this.indexList.push(item.initial)
        this.itemArr.push(item.data)

      })
      // console.log(this.indexList)
      // console.log(this.itemArr)


  },





    //获取文字信息
    getCur(e) {
      this.hidden = false;
      this.listCur =  this.indexList[e.target.id];
    },
    setCur(e) {
      this.hidden = true;
      this.listCur = this.listCur
    },
    //滑动选择Item
    tMove(e) {
      let y = e.touches[0].clientY,
          offsettop = this.boxTop,
          that = this;
      //判断选择区域,只有在选择区才会生效
      if (y > offsettop) {
        let num = parseInt((y - offsettop) / 20);
        this.listCur = that.indexList[num];
      }
      ;
    },

    //触发全部开始选择
    tStart() {
      this.hidden = false
    },

    //触发结束选择
    tEnd(e) {
      this.hidden = true;
      this.listCurID = e.target.id
    },
  }
}
</script>

<style scoped>
.close{
  position: absolute;
  right: 20px;
  font-size: 27px;
  top: 0px;
}
.title{
  padding: 10px 20px  0px 20px;
  text-align: center;
}
.indexItem{
  background: #f8f8f8;
  padding: 10px;
}
.cu-item{
  padding: 10px;
}
.pages>.content{
  /*padding: 10px;*/
  box-shadow: 0 2px 10px 0 #1a1a1a33;
  border-radius: 20px 20px 0 0 ;
}
.pages{
  position: absolute;
  bottom: 3px;
  width: 100%;
  height: 600px;
  background: white;

}
.head{
  font-size: 14px;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
}
.indexes {
  /*padding: 10px;*/
  position: relative;
}

.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20upx 20upx 20upx 60upx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40upx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  border-radius: 10upx;
}

.indexBar-item {
  flex: 1;
  width: 40upx;
  height: 40upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24upx;
  color: #888;
}

movable-view.indexBar-item {
  width: 40upx;
  height: 40upx;
  z-index: 9;
  position: relative;
}

movable-view.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10upx;
  height: 20upx;
  width: 4upx;
  background-color: #f37b1d;
}

.indexToast {
  position: absolute;
  top: 0;
  right: 80upx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100upx;
  height: 100upx;
  border-radius: 10upx;
  margin: auto;
  color: #fff;
  line-height: 100upx;
  text-align: center;
  font-size: 48upx;
}
</style>
